<template>
  <el-dialog
    v-model="visible"
    title="选择客户"
    width="1000px"
    class="customer-select-dialog"
    @closed="onDialogClosed"
    :close-on-click-modal="false"
  >
    <div class="search-input mb-3">
      <el-form ref="elFormRef" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="formInline.customerName" style="width: 240px" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="客户电话" prop="customerPhone">
          <el-input v-model="formInline.customerPhone" style="width: 240px" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="danger" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <CustomTable
      ref="customTableRef"
      :actions="listCustomer"
      :columns="columns"
      :auto-request="false"
      show-selection
      show-pagination
    >
      <template #operationSlot="{ row }">
        <el-button type="primary" text size="small" @click="handleSelect(row)">选择</el-button>
      </template>
    </CustomTable>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, defineExpose, watch, nextTick } from 'vue';
import { listCustomer } from '../../api/customers';
import { columns } from '../../views/platformCustomers/customers/modalColumn';

const customTableRef = ref();
const emit = defineEmits(['select']);

// 是否显示弹窗
const visible = ref(false);
const formInline = reactive({
  customerName: '',
  customerPhone: ''
});

// 点击选择
function handleSelect(customer: any) {
  emit('select', customer, arrIndex.value);
  visible.value = false;
}

const onSubmit = () => {
  nextTick(() => {
    customTableRef.value?.search(formInline);
  });
};

const onReset = () => {
  // formInline.customerName = '';
  // formInline.customerPhone = '';
  elFormRef.value?.resetFields();
  onSubmit();
};
const arrIndex = ref();
const elFormRef = ref();

// 弹窗关闭时重置表单
const onDialogClosed = () => {
  elFormRef.value?.resetFields();
};

const hide = () => {
  visible.value = false;
};

const show = (index: number) => {
  arrIndex.value = index; // 预留参数，暂未使用
  visible.value = true;
  onSubmit();
};

// 暴露给父组件的方法
defineExpose({
  show,
  hide
});
</script>

<style scoped lang="scss">
.customer-select-dialog {
  .search-input {
    margin-top: 12px;
  }
  .customer-table .el-button {
    padding: 0;
  }
  .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
